﻿<!DOCTYPE html  >
<html>
<head>
    <title>  获取爱好 </title>
    <meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
</head>

<body>
<form id="myForm">
    <h3>选择你的爱好：</h3>
    <ul id="hobby">
        <li><input type="checkbox" value="音乐" />音乐</li>
        <li><input type="checkbox" value="登山" />登山</li>
        <li><input type="checkbox" value="游泳" />游泳</li>
        <li><input type="checkbox" value="阅读" />阅读</li>
        <li><input type="checkbox" value="打球" />打球</li>
        <li><input type="checkbox" value="跑步" />跑步</li>
        <li><input type="checkbox" value="其他" />其他</li>
    </ul>
    <hr/>
    <ul>
        <li><input type="button" value="查看我选择的爱好" /></li>
    </ul>
    <p id="text"></p>

</form>
<script type="text/javascript">
	$(function(){
	  $(":button").click(function(){
	     var value="";
	     
	     var $asd=$(":checkbox:checked");
	     for(var i=0;i<$asd.length;i++){
	        value+=$asd[i].value+"<br/>";
	        
	     }
	     $("#text").html(value);
	  
	  });
	
	});
	
</script>

</body>
</html>
